﻿@model Guid

@section Styles{
    <style type="text/css">
        html,
        body {
            background: #ffffff;
        }
    </style>
}

@section Scripts{
    <input type="hidden" value='@Html.Raw(ViewData["power"])' id="hidden_power" />
    <input type="hidden" value='@(Model)' id="hidden_id" />
    <input type="hidden" value='@ViewData["pId"]' id="hidden_pId" />
    <script type="text/javascript">
        var power = JSON.parse(document.getElementById('hidden_power').value);
        var id = document.getElementById('hidden_id').value;
        var pId = document.getElementById('hidden_pId').value;
        var app = new Vue({
            el: "#app",
            data: function () {
                return {
                    power: power,
                    prefix: "/Admin/SysMenu",
                    form: {
                        saveState: false,
                        pId: pId,
                        vm: {
                            model: {},
                            functionAllList: [],
                            functionIds: []
                        }
                    }
                }
            },
            computed: {
                formKey: function () {
                    return id ? id : '';
                }
            },
            created: function () {
                this.loadForm();
            },
            mounted: function () {

            },
            methods: {
                loadForm: function () {
                    var _this = this;
                    var path = _this.prefix + "/FindForm/" + this.formKey;

                    hzyAdmin.httpGet(path, {}, function (r) {
                        if (r.code !== 1) return;
                        _this.form.vm = r.data;
                        //给pid赋值
                        _this.form.vm.model.parentId = _this.form.pId ? _this.form.pId : null;
                    });
                },
                closeWindow: function (delay = 0) {
                    setTimeout(function () {
                        hzyAdmin.layer.close(hzyAdmin.layer.getFrameIndex(window.name));
                    }, delay);
                },
                save: function () {
                    var _this = this;
                    var path = _this.prefix + "/SaveForm";

                    //验证
                    if (!this.form.vm.model.name) return hzyAdmin.alert('菜单名不能为空!', '警告');

                    this.form.saveState = true;
                    hzyAdmin.httpPost(path, this.form.vm, function (r) {
                        _this.form.saveState = false;
                        if (r.code === 1) {
                            hzyAdmin.alert('保存成功', '成功');
                            //关闭当前窗口
                            _this.closeWindow();
                        }
                    });
                }
            }
        });
    </script>
}

<div class="m-20 hzyAdminForm" id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 bg-red-500 text-white pl-20 pt-20 pr-20">
                <span>方便开发时 需要的 菜单ID&nbsp; : &nbsp;</span>{{form.vm.model.id}}
            </div>
            <a class="col-sm-12 bg-red-500 text-white pl-20 pt-20 pr-20" target="_blank" href="https://fontawesome.com">图标查找地址：https://fontawesome.com</a>
            <a class="col-sm-12 bg-red-500 text-white pl-20 pt-20 pr-20 pb-20" target="_blank" href="http://www.fontawesome.com.cn/">图标查找地址：http://www.fontawesome.com.cn 注意：第一个 fa 要改为 fas 有的图标可能不支持</a>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <h4 class="example-title">编号</h4>
                <input type="number" class="form-control" placeholder="请输入 编号" v-model="form.vm.model.number"
                       autocomplete="off" />
            </div>
            <div class="col-sm-6">
                <h4 class="example-title">菜单名称</h4>
                <input type="text" class="form-control" placeholder="请输入 菜单名称" v-model="form.vm.model.name"
                       autocomplete="off" />
            </div>
            <div class="col-sm-6">
                <h4 class="example-title">菜单地址</h4>
                <input type="text" class="form-control" placeholder="请输入 菜单地址" v-model="form.vm.model.url"
                       autocomplete="off" />
            </div>
            <div class="col-sm-6">
                <h4 class="example-title">图标</h4>
                <input type="text" class="form-control" placeholder="请输入 图标" v-model="form.vm.model.icon"
                       autocomplete="off" />
            </div>
            <div class="col-sm-6">
                <h4 class="example-title">是否显示</h4>
                <el-radio v-model="form.vm.model.isShow" :label="1">是</el-radio>
                <el-radio v-model="form.vm.model.isShow" :label="2">否</el-radio>
            </div>
            <div class="col-sm-6">
                <h4 class="example-title">选项卡能否关闭</h4>
                <el-radio v-model="form.vm.model.isClose" :label="1">是</el-radio>
                <el-radio v-model="form.vm.model.isClose" :label="2">否</el-radio>
            </div>
            <div class='col-sm-12'>
                <h4 class="example-title">拥有功能</h4>

                <el-checkbox-group v-model="form.vm.functionIds">
                    <el-checkbox v-for="(item,index) in form.vm.functionAllList" :key="index" :label="item.id">
                        {{item.name}}
                    </el-checkbox>
                </el-checkbox-group>

            </div>
        </div>
        <div class="hzyAdminForm-footer">
            <div class="row">
                <div class="col-sm-6"></div>
                <div class="col-sm-6 text-right">
                    <button class="btn btn-primary" @@click="save" v-bind:disabled="form.saveState"
                            v-if="power.Save">
                        保存
                    </button>
                    <button class="btn btn-danger" @@click="closeWindow()">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>